import React, { useEffect, useState } from 'react'
import { Button, Table, Tag, Modal, Popover, Switch } from "antd";
import {
  DeleteOutlined,
  EditOutlined,
  ExclamationCircleFilled
} from '@ant-design/icons';
import axios from 'axios';

const { confirm } = Modal;

const RightList = () => {
  const [dataSource, setdataSource] = useState([]);

  // 从后端获取数据
  useEffect(() => {
    axios.get("/rights?_embed=children").then((res) => {
      const list = res.data;
      list.forEach(item => {
        if (item.children.length === 0) {
          item.children = ''
        }
      });
      setdataSource(list)
    })
  }, [])

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      render: (id) => {
        return <b>{id}</b>
      },
    },
    {
      title: '权限名称',
      dataIndex: 'title'
    },
    {
      title: '权限路径',
      dataIndex: 'key',
      render: (key) => {
        return <Tag color='blue'>{key}</Tag>
      }
    },
    {
      title: "操作",
      render: (item) => {
        return <div>
          <Button
            danger
            shape='circle'
            icon={<DeleteOutlined
              onClick={() => confirmMethod(item)}
            />}></Button>

          <Popover
            content={
              <div style={{ textAlign: "center" }}>
                <Switch
                  checked={item.pagepermisson}
                  onClick={() => switchMethod(item)}
                ></Switch>
              </div>
            }
            title="页面配置项"
            trigger={item.pagepermisson === undefined ? "" : "click"}
          >
            <Button
              type='primary'
              shape='circle'
              icon={<EditOutlined
              />}
              style={{ margin: "0px 10px" }}
              disabled={item.pagepermisson === undefined}
            ></Button>
          </Popover>
        </div>
      }
    }
  ];

  // 给删除按钮绑定点击事件
  const confirmMethod = (item) => {
    confirm({
      title: '你确定要删除?',
      icon: <ExclamationCircleFilled />,
      onOk() {
        deleteMethod(item)
      },
      onCancel() {

      },
    });
  }
  const deleteMethod = (item) => {
    // 当前页面同步操作 + 后端同步
    if (item.grade === 1) {
      setdataSource(dataSource.filter(data => data.id !== item.id))
      axios.delete(`/rights/${item.id}`)
    } else {
      let list = dataSource.filter(data => data.id === item.rightId)
      list[0].children = list[0].children.filter(data => data.id !== item.id)
      setdataSource([...dataSource])
      axios.delete(`/children/${item.id}`)

    }
  }

  // 点击开关来控制侧边栏的项目是否显示
  const switchMethod = (item) => {
    console.log(item);
    item.pagepermisson = item.pagepermisson === 1 ? 0 : 1;
    setdataSource([...dataSource]);
    if (item.grade === 1) {
      axios.patch(`/rights/${item.id}`, {
        pagepermisson: item.pagepermisson
      })
    } else {
      axios.patch(`/children/${item.id}`, {
        pagepermisson: item.pagepermisson
      })
    }
  }

  return (
    <div>
      <Table
        dataSource={dataSource}
        columns={columns}
        pagination={{
          pageSize: 5
        }} />
    </div>
  )
}

export default RightList